import { Col } from 'antd';
import { WeatherIcon } from './WeatherIcon';
import { WeatherData } from '../types';

interface WeatherCardProps {
  data: WeatherData;
}

export const WeatherCard = ({ data }: WeatherCardProps) => (
  <Col xs={24} sm={12} md={8} lg={6}>
    <div className="weather-card">
      <h3>{data.fxDate}</h3>
      <div className="weather-icon">
        <WeatherIcon code={data.iconDay} />
      </div>
      <div className="temperature">
        {data.tempMin}℃ ~ {data.tempMax}℃
      </div>
      <div className="extra-info">
        <p>天气：{data.textDay}</p>
        <p>湿度：{data.humidity}%</p>
        <p>风速：{data.windSpeedDay}m/s</p>
      </div>
    </div>
  </Col>
);